<template>
  <f7-page>
    <f7-navbar back-link="Back">

      <f7-nav-right>
        <f7-link icon-if-ios="f7:cloud_download" icon-if-md="material:cloud_download" panel-open="right"></f7-link>
        <f7-link icon-if-ios="f7:share" icon-if-md="material:share" panel-open="right"></f7-link>
      </f7-nav-right>
    </f7-navbar>


    <f7-card>
      <f7-card-content>
        <div class="block ">
          <div class="row book-info-row">
            <div class="col-33 no-gap">
              <img :src="bookData.surface" alt="" style="width: 90px;height: 120px">
            </div>
            <div class="col-77 no-gap book-info">
                <div class="book-title">{{ bookData.name }}</div>
                <div class="book-author"> <span class="author">{{bookData.author}}</span> &nbsp; | &nbsp; {{ bookData.category}}</div>
                <div class="word-update">{{bookData.wordNum}} &nbsp; | &nbsp; {{bookData.lastChapterUpdateTime}}</div>
                <div class="mark">评分：{{bookData.mark}}</div>
            </div>
          </div>
        </div>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>追更</f7-link>
        <f7-link :href="`/bookindex?bookid=${bookData.bookid}`">书籍目录</f7-link>
        <f7-link :href="`/readbook?bookid=${bookData.bookid}&chapterid=${bookData.firstChapterId}`">点击阅读</f7-link>
      </f7-card-footer>
    </f7-card>
    <f7-card>
      <f7-card-content>
        <f7-list accordion>
          <f7-list-item accordion-item title="简介">
            <f7-accordion-content>
              <f7-block>
                {{bookData.introduction }}
              </f7-block>
            </f7-accordion-content>
          </f7-list-item>
        </f7-list>
      </f7-card-content>
    </f7-card>
    <f7-card>
      <f7-card-header>
        书评
        <f7-nav-right>
          <f7-link text="写书评"></f7-link>
        </f7-nav-right>
      </f7-card-header>
    </f7-card>


  </f7-page>
</template>

<script>
    import LocalSave from "../js/localSave"
    export default {
        name: "bookdetail",
      data:function () {
          console.log(this.$f7route.query);
          console.log()
        var options = this.$f7route.query;
        if (options.hasOwnProperty("bookid")) {
          console.log(options.bookid);
        }
        return {
          // f7:f7
          bookid:options.bookid,
          bookData:{}
        }
      },
      created:function () {
        var ls = new LocalSave();
        console.log("走到这里了")
        var localData = ls.get("bookid"+this.bookid);
        console.log(localData);
        var saveKey = "bookid"+this.bookid;
        if (ls.get(saveKey) != null) {
          console.log("本地数据为");
          console.log(localData);
          this.bookData = localData;
        }else{
          var r = this.$request;
          var that = this;
          var url = "https://zxs.afu.io/api/book/"+this.bookid;
          r.get(url,function (res) {
            console.log(res);
            var remoteData = JSON.parse(res)
            if (remoteData.status == true){
              console.log("进入这里了")
              that.bookData = remoteData.data;
              ls.save(saveKey,remoteData.data);
            }
          })
        }



      },
      methods:{
        onSwipeoutDel:function (bookid) {
            // this.$f7.
          console.log(bookid);
        }
      }
    }
</script>

<style scoped>
  .book-info {
    margin-left: 15px ;
    width: 65%;
  }
  .book-info-row {
    margin-top:14px;

  }
  .book-title {
    font-size: 16px;
    font-weight: bold;
  }
  .author {
    color: RED;
  }
</style>
